// Element Plus 主题定制
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #1890ff,
    ),
    'success': (
      'base': #52c41a,
    ),
    'warning': (
      'base': #faad14,
    ),
    'danger': (
      'base': #ff4d4f,
    ),
    'error': (
      'base': #ff4d4f,
    ),
    'info': (
      'base': #1890ff,
    ),
  ),
  $border-radius: (
    'base': 8px,
    'small': 4px,
    'round': 20px,
    'circle': 100%,
  ),
);

// 自定义组件样式
:root {
  // 按钮样式
  --el-button-border-radius: 6px;
  --el-button-font-weight: 500;
  
  // 卡片样式
  --el-card-border-radius: 12px;
  --el-card-border-color: var(--border-light);
  --el-card-shadow: var(--shadow-light);
  
  // 表格样式
  --el-table-border-radius: 8px;
  --el-table-header-bg-color: var(--bg-tertiary);
  
  // 输入框样式
  --el-input-border-radius: 6px;
  --el-input-border-color: var(--border-color);
  
  // 标签样式
  --el-tag-border-radius: 4px;
  
  // 菜单样式
  --el-menu-border-radius: 8px;
}

// 全局组件样式覆盖
.el-button {
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    transform: translateY(-1px);
  }
  
  &.el-button--primary {
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
    
    &:hover {
      background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
      box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
    }
  }
  
  &.el-button--success {
    background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
    
    &:hover {
      background: linear-gradient(135deg, #73d13d 0%, #52c41a 100%);
      box-shadow: 0 6px 16px rgba(82, 196, 26, 0.4);
    }
  }
  
  &.el-button--warning {
    background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(250, 173, 20, 0.3);
    
    &:hover {
      background: linear-gradient(135deg, #ffc53d 0%, #faad14 100%);
      box-shadow: 0 6px 16px rgba(250, 173, 20, 0.4);
    }
  }
  
  &.el-button--danger {
    background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
    
    &:hover {
      background: linear-gradient(135deg, #ff7875 0%, #ff4d4f 100%);
      box-shadow: 0 6px 16px rgba(255, 77, 79, 0.4);
    }
  }
}

.el-card {
  border-radius: var(--radius-medium);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: var(--shadow-medium);
  }
  
  .el-card__header {
    background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
  }
}

.el-table {
  border-radius: var(--radius-medium);
  overflow: hidden;
  
  .el-table__header {
    th {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      font-weight: 600;
      border-bottom: 1px solid var(--border-light);
    }
  }
  
  .el-table__body {
    tr:hover {
      background: var(--bg-tertiary);
    }
  }
}

.el-input {
  .el-input__wrapper {
    border-radius: var(--radius-small);
    transition: all 0.2s ease;
    
    &:hover {
      box-shadow: 0 0 0 1px var(--primary-light);
    }
    
    &.is-focus {
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
  }
}

.el-select {
  .el-select__wrapper {
    border-radius: var(--radius-small);
    transition: all 0.2s ease;
    
    &:hover {
      box-shadow: 0 0 0 1px var(--primary-light);
    }
    
    &.is-focus {
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
  }
}

.el-form-item {
  margin-bottom: 24px;
  
  .el-form-item__label {
    font-weight: 500;
    color: var(--text-primary);
  }
}

.el-dialog {
  border-radius: var(--radius-large);
  
  .el-dialog__header {
    background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    
    .el-dialog__title {
      font-weight: 600;
      color: var(--text-primary);
    }
  }
}

.el-message {
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-medium);
}

.el-notification {
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-heavy);
}